<template>
  <div>
    <div bg-white p-32rpx mb-20rpx>
      <nut-radio-group v-model="currentGrade" direction="horizontal">
        <nut-radio v-for="(item, index) in gradList" :key="index" shape="button" :label="item.value">
          {{ item.label }}{{ item.count }}
        </nut-radio>
      </nut-radio-group>
    </div>
    <div v-if="isShow" bg-white px-32rpx overflow-hidden>
      <div v-for="(item, index) in comment.list" v-if="comment.list.length" py-16rpx my-16rpx :key="index">
        <nut-comment @clickImages="clickImages" :images="item.images" :info="item._info" :operation="[]">
          
          <template #commentShopReply>
            <div class="nut-comment-shop">
              <text style="display: inline-block">{{item.storeName}}：</text>
              {{ item.reply }}
            </div>
            <image v-if="item.replyImage" mode="widthFix" :src="item.replyImage" style="margin-top:20rpx;" />
          </template>
        </nut-comment>
      </div>
      <div v-else mt-100rpx mb-100rpx>
        <empty />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import empty from '@/components/empty/index.vue'
import { getGoodsComments, getGoodsCommentsCount } from '@/api/goods'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
const currentGrade = ref<string>('')
const isShow = ref<boolean>(false)
const params = ref<any>({
  pageNumber: 1,
  pageSize: 10
})
const gradList = ref<any>([
  {
    label: '全部',
    value: ''
  },
  {
    label: '好评',
    value: 'GOOD'
  },
  {
    label: '中评',
    value: 'MODERATE'
  },
  {
    label: '差评',
    value: 'WORSE'
  },
  {
    label: '有图',
    value: 'HAVEIMAGE'
  }
])
const comment = ref<any>({
  list: [],
  data: {}
})
const routerVal = ref<any>('')

watch(
  () => currentGrade.value,
  (val) => {
    isShow.value = false
    if (val === 'HAVEIMAGE') {
      params.value.haveImage = 1
      delete params.value.grade
    } else {
      params.value.grade = val
      delete params.value.haveImage
    }
    comment.value.list = []
    init()
  }
)

function clickImages(i: any) {
  uni.previewImage({
    current: 0,
    urls: [i.value.bigImgUrl],
    longPressActions: {
      itemList: ['保存图片'],
      success: function (data) {},
      fail: function (err) {}
    }
  })
}

async function fetchCommentCount() {
  const res = await getGoodsCommentsCount(routerVal.value.goodsId)
  if (res.data.success) {
    Object.keys(res.data.result).forEach((key: any) => {
      gradList.value.forEach((item: any) => {
        if (item.value === key.toUpperCase()) {
          item.count = res.data.result[key]
        }
      })
    })
  }
}

async function init() {
  const res = await getGoodsComments(routerVal.value.goodsId, params.value)
  isShow.value = true
  if (res.data.success) {
    comment.value.data = res.data.result
    if (res.data.result.records.length) {
      res.data.result.records.forEach((item: any) => {
        item._info = {
          content: item.content, // 评论详情
          nickName: item.memberName, // 评论人的姓名
          score: item.serviceScore, // 评论星星数
          avatar: item.memberProfile, // 评论人头像
          time: item.createTime, // 评论时间
          size: item.goodsName // 评论人购买的商品规格
        }
        item.images = item.images
          ? item.images.split(',').map((item: any) => {
              return {
                smallImgUrl: item, // 小图，列表展示时使用
                bigImgUrl: item, // 大图，大图展示使用
                imgUrl: item // 兜底图
              }
            })
          : []
      })

      console.log(res.data.result.records)
      comment.value.list.push(...res.data.result.records)
    }
  }
}

onLoad((options: any) => {
  routerVal.value = options
  init()
  fetchCommentCount()
})

onReachBottom(() => {
  if (comment.value.data.total > params.value.pageNumber * params.value.pageSize) {
    params.value.pageNumber++
    init()
  }
})
</script>

<style scoped></style>
